var Charts = function (params) {
	var type = params.type,
		data = params.data,
		colors = params.colors || [''],
		point = params.point || '',
		radius = params.radius,
		context = params.ctx,
			ctx = params.ctx,
		total = 0;
	for (var i = 0; i < data.length; i++) {
		total += data[i];//累加
	}
		//饼图
	if(type == 'pie'){
		for (var j = 0; j < data.length; j++) {
			context.beginPath();

			var start = 0;
			if (j > 0) {
				for (var k = 0; k < j; k++) {
					start += data[k] / total * 2 * Math.PI;
				}
			}
			context.arc(point.x, point.y, radius, start, data[j] / total * 2 * Math.PI);

			context.lineTo(point.x, point.y);

			context.fillStyle = colors[j];

			context.fill();
			context.closePath();
		}
	}
	else if(type == "ring"){
		for (var a = 0; a < data.length; a++) {
			context.beginPath();
			//起点弧度
			var startRing = 0;
			if (a > 0) {
				for (var b = 0; b < a; b++) {
					startRing += data[b] / total * 2 * Math.PI;
				}
			}
			context.arc(point.x, point.y, radius, startRing, data[a] / total * 2 * Math.PI);

			context.lineWidth = radius/3;
			context.strokeStyle = colors[a];
//			context.fillStyle = colors[j];
			// context.setGlobalAlpha(0.9);
			context.stroke();

			context.closePath();
			context.beginPath();

			context.arc(point.x, point.y, radius/1.5, startRing, data[a] / total * 3 * Math.PI);

			context.lineWidth = radius/16;
			context.strokeStyle = '#f6f6f6';
			context.stroke();
			context.closePath();
		}
	}
	//柱状图
	else if(type == 'bar'){
		var arr = params.data,
			showYAxis = params.showYAxis,
			bgColors = params.bgColors || "#fb999a",
			color = params.color,
			cHeight = params.cHeight || 300,//表格高度
			cWidth = params.cWidth || 500,//表格宽度
			bWidth = params.bWidth || 20,//每根柱状图宽度
			xCaption = params.xCaption || '', //x轴底部说明文字
			yCaption = params.yCaption || '', //y轴底部说明文字
			bMargin = params.bMargin || 16;//柱子间距

		//chart property
		var cMargin, cSpace;
		var cMarginSpace, cMarginHeight;

		//single bar property
		var totalBars,maxValue;

		//bar animation
		var flag , t100,speed;

		//Y axis property
		var totLabelsOnYAxis;

		function chartSet() {

			// chart properties
			cMargin = -60;//图表与canvas边界距离
			cSpace = 50;
			if(showYAxis){
				cMargin = 10;
			}
			cMarginSpace = cMargin + cSpace;//0,y轴与左边文字距离
			cMarginHeight = 40*2 + cHeight;//canvas顶部距离
			// bar properties
			totalBars = arr.length;
			// find maximum value on chart
			maxValue = 0;

			for (var i = 0; i < totalBars; i++) {
				var arrVal = arr[i].split(",");
				var barVal = parseInt(arrVal[1]);
				if (parseInt(barVal) > parseInt(maxValue))
				maxValue = barVal;//获取最大值
			}
			totLabelsOnYAxis = 10;
			// 初始化动画参数
			flag = 0;
			t100 = 100;
			speed = 10;

		}
		// draw chart axis, labels and markers
		function drawAxisLabelMarkers() {

			context.lineWidth = 1;
			// draw y axis
			drawAxis(cMarginSpace, cMarginHeight, cMarginSpace, cMargin);
			// draw x axis
			//x轴与y轴水平距离,x与y垂直距离，x轴宽度
			drawAxis(cMarginSpace, cMarginHeight, cMarginSpace + cWidth+20, cMarginHeight);
			context.lineWidth = 1;
			drawMarkers();

		}

		//画轴
		function drawAxis(x, y, X, Y) {

			context.beginPath();
			context.moveTo(x,y);
			context.lineTo(X,Y);
//			context.setStrokeStyle("#dddddd");//x Axis and y Axis border color
			context.strokeStyle = "#dddddd";
			//			context.fillStyle = colors[j];
			// context.setGlobalAlpha(0.9);
			context.closePath();
			context.stroke();

		}

		// draw chart markers on X and Y Axis
		function drawMarkers() {

			var numMarkers = parseInt(maxValue / totLabelsOnYAxis);
			context.textAlign = "center";
			// Y Axis

			for (var a = 0; a <= totLabelsOnYAxis; a++) {
				var markerVal = a * numMarkers;
				var markerValHt = a * numMarkers * cHeight;
				var xMarkers = cMarginSpace - 25;//y轴数值与Y轴距离
				var yMarkers = cMarginHeight - (markerValHt / maxValue);
				context.fillText(markerVal, xMarkers, yMarkers);
			}
			// X Axis
			context.textAlign = 'center';

			for (let b = 0; b < totalBars; b++) {
				var arrVal = arr[b].split(",");

				var name = arrVal[0];
				var markerXPos = (cMarginSpace + bMargin)
				+ (b * (bWidth + bMargin)) + (bWidth/2) -10;

				var markerYPos = cMarginHeight + 20;//x轴数值与x轴距离
//				context.setFontSize(12);
//				context.setFillStyle(color);

				context.font = "normal normal 12px sans-serif";

//				context.strokeStyle = color;

				context.fillStyle = color;
				// context.setGlobalAlpha(0.9);

				context.fillText(name, markerXPos, markerYPos);//x轴底部文字

			}

			context.save();
			// Add Y Axis title
			context.translate(cMargin + 10, cHeight / 2);
			context.rotate(Math.PI * -90 / 180);
			context.fillText(yCaption, 0, 0);
			context.restore();
			// Add X Axis Title
			context.fillText(xCaption, cMarginSpace +
			(cWidth / 4), 20 );//底部文字与x轴距离

		}
		//动画
		function drawChartWithAnimation() {
			ctx.clearRect(0, 0, 1000,1000);
			if (flag < t100) {
				flag = flag + 10;
				setTimeout(drawChartWithAnimation, speed);
			}
			for (var i = 0; i < totalBars; i++) {
				var arrVal = arr[i].split(",");
				var bVal = parseInt(arrVal[1]);//获取树状图数值
				var bHt = (bVal * cHeight / maxValue) / (101 - flag);//bar height
				var bX = cMarginSpace + (i * (bWidth + bMargin)) + bMargin;
				var bY = cMarginHeight - bHt - 2;//cMarginHeight=> 380
				var textY = cMarginHeight - bHt-10;
				drawRectangle(bX, bY, bWidth, bHt);
				// draw(bX,bY,bWidth,maxValue-bHt);
//				context.strokeStyle = color;
//				context.fillStyle = "#000000";
				// context.setGlobalAlpha(0.9);
//				context.setFillStyle("#000000");//singer bar number color

				context.fillText(bVal,bX,textY);//singer bar number

			}
			// Loop through the total bars and draw
		}
		function drawRectangle(x, y, w, h) {
			context.beginPath();
			context.rect(x, y, w, h);
			context.strokeStyle = "#ffffff";
			context.fillStyle = bgColors;
			context.stroke();
			context.fill();
			context.closePath();
		}
		chartSet();
		drawAxisLabelMarkers();

		drawChartWithAnimation();
	}
};
export default Charts;
